<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>待办事项管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .completed {
            text-decoration: line-through;
            color: #6c757d;
        }
        .custom-checkbox {
            margin-bottom: 0;
        }
        .filter-section {
            background: #f8f9fa;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .table th {
            background-color: #f8f9fa;
        }
        .table td {
            vertical-align: middle;
        }
        .date-cell {
            white-space: nowrap;
            font-size: 0.9em;
        }
        .btn-group-sm > .btn {
            margin-right: 5px;
        }
        .overdue {
            color: #dc3545;
        }
        .badge {
            font-size: 85%;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>待办事项列表</h2>
            <div>
                <a href="${pageContext.request.contextPath}/user/logout" class="btn btn-outline-secondary mr-2">退出登录</a>
                <a href="new" class="btn btn-primary">添加新待办事项</a>
            </div>
        </div>

        <!-- 筛选部分 -->
        <div class="filter-section">
            <form id="filterForm" class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label><i class="fas fa-search"></i> 标题搜索</label>
                        <input type="text" class="form-control" id="searchTitle" placeholder="搜索标题...">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label><i class="fas fa-filter"></i> 状态</label>
                        <select class="form-control" id="filterStatus">
                            <option value="">全部</option>
                            <option value="true">已完成</option>
                            <option value="false">未完成</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label><i class="far fa-calendar-alt"></i> 开始日期</label>
                        <input type="datetime-local" class="form-control" id="dateFrom">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label><i class="far fa-calendar-alt"></i> 结束日期</label>
                        <input type="datetime-local" class="form-control" id="dateTo">
                    </div>
                </div>
            </form>
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-light">
                    <tr>
                        <th style="width: 40px" class="text-center">状态</th>
                        <th>标题</th>
                        <th>描述</th>
                        <th style="width: 160px">创建时间</th>
                        <th style="width: 160px">截止时间</th>
                        <th style="width: 120px">操作</th>
                    </tr>
                </thead>
                <tbody id="todoList">
                    <c:forEach var="todo" items="${todos}">
                        <tr data-completed="${todo.completed}" 
                            data-title="${todo.title}"
                            data-created="<fmt:formatDate value="${todo.createdDate}" pattern="yyyy-MM-dd HH:mm"/>">
                            <td class="text-center">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" 
                                           id="completed-${todo.id}" 
                                           ${todo.completed ? 'checked' : ''}
                                           onchange="updateStatus(${todo.id}, this.checked)">
                                    <label class="custom-control-label" for="completed-${todo.id}"></label>
                                </div>
                            </td>
                            <td class="${todo.completed ? 'completed' : ''}">${todo.title}</td>
                            <td class="${todo.completed ? 'completed' : ''}">${todo.description}</td>
                            <td class="date-cell">
                                <fmt:formatDate value="${todo.createdDate}" pattern="yyyy-MM-dd HH:mm"/>
                            </td>
                            <td class="date-cell ${!todo.completed && todo.dueDate != null && todo.dueDate.time < currentTime ? 'overdue' : ''}">
                                <fmt:formatDate value="${todo.dueDate}" pattern="yyyy-MM-dd HH:mm"/>
                                <c:if test="${!todo.completed && todo.dueDate != null && todo.dueDate.time < currentTime}">
                                    <span class="badge badge-danger">已逾期</span>
                                </c:if>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="edit?id=${todo.id}" class="btn btn-info">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <button class="btn btn-danger" onclick="deleteTodo(${todo.id})">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 添加Font Awesome图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <!-- JavaScript代码保持不变 -->
    <script>
        // 更新待办事项状态
        function updateStatus(id, completed) {
            $.ajax({
                url: 'update',
                type: 'POST',
                data: {
                    id: id,
                    completed: completed
                },
                success: function(response) {
                    // 操作成功后刷新页面
                    window.location.reload();
                },
                error: function() {
                    alert('更新状态失败，请重试');
                    $(`#completed-${id}`).prop('checked', !completed);
                }
            });
        }

        // 删除待办事项
        function deleteTodo(id) {
            if (confirm('确定要删除吗？')) {
                $.ajax({
                    url: 'delete',
                    type: 'POST',
                    data: { id: id },
                    success: function() {
                        // 删除成功后刷新页面
                        window.location.reload();
                    },
                    error: function() {
                        alert('删除失败，请重试');
                    }
                });
            }
        }

        // 筛选功能
        function filterTodos() {
            const searchTitle = $('#searchTitle').val().toLowerCase();
            const filterStatus = $('#filterStatus').val();
            const dateFrom = $('#dateFrom').val();
            const dateTo = $('#dateTo').val();

            $('#todoList tr').each(function() {
                const $row = $(this);
                const title = $row.data('title').toLowerCase();
                const completed = $row.data('completed').toString();
                const created = $row.data('created');

                let show = true;

                // 标题筛选
                if (searchTitle && !title.includes(searchTitle)) {
                    show = false;
                }

                // 状态筛选
                if (filterStatus && completed !== filterStatus) {
                    show = false;
                }

                // 日期范围筛选
                if (dateFrom && created < dateFrom) {
                    show = false;
                }
                if (dateTo && created > dateTo) {
                    show = false;
                }

                $row.toggle(show);
            });
        }

        // 绑定筛选事件
        $(document).ready(function() {
            $('#searchTitle').on('input', filterTodos);
            $('#filterStatus').on('change', filterTodos);
            $('#dateFrom, #dateTo').on('change', filterTodos);
        });
    </script>
</body>
</html> 